<template>
  <div class="proDet_wrap relative_height">
    <Navbar :isBack="true" />
    <div class="top">
      <div class="pageWidth top-cont u-flex u-row-between">
        <div>
          <div class="top-tit">产品详情</div>
          <div class="top-eng">PRODUCT DETAILS</div>
        </div>
        <img src="@/image/mine/shop-det-icon.png" class="top-img" />
      </div>
    </div>
    <div class="pageWidth bot">
      <div class="head-img u-flex">
        <div class="img" v-if="info.goods_image">
          <img :src="chooseInfo.goods_image" alt="" />
        </div>
        <div class="img img-grey u-flex-center" v-else>图片加载中</div>
        <div style="flex: 1">
          <div class="text">
            <div class="blue">{{ info.goods_name }}</div>
            <div class="specification" v-for="item in info.specList">
              <div class="spe_tit">{{ item.spec_name }}</div>
              <div class="u-flex u-dlex-wrap">
                <div
                  class="spe_item u-flex-center hand"
                  v-for="items in item.valueList"
                  @click="specsClick(item.key, items.spec_value_id)"
                  :class="items.show && items.show == true ? 'active' : ''"
                >
                  {{ items.spec_value }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title u-flex">
        <img src="@/image/mine/shop-det-arr.png" />
        商品描述
      </div>
      <div class="sub" v-html="content2"></div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const store = useStore()
  const route = useRoute() // 添加useRoute

  const info = ref({})
  const content = ref(null)
  const content2 = ref(null)

  const specList = ref([]) //规格数组
  const chooseInfo = ref({}) //选择规格后的商品信息
  const specification = ref([]) //规格参数（不属于单规格或多规格）

  onMounted(() => {
    detailFn(route.query.id)
  })

  const detailFn = id => {
    info.value = {}
    content.value = ''
    content2.value = ''
    specList.value = []
    specification.value = []

    store
      .dispatch('home/goodsDetailApi', {
        goodsId: id,
      })
      .then(res => {
        if (res.status == 200) {
          info.value = res.data.detail

          let richtext = res.data.detail.content
          const regex = new RegExp('<img', 'gi')
          content.value = richtext.replace(regex, '<img style="width:100%;"')

          const richText = content.value
          content2.value = richText.replace(/<\/?p>/g, '')

          specList.value = info.value.specList //规格数组
          chooseInfo.value = info.value //选择规格后的商品信息
          specification.value = info.value.specification //规格参数（不属于单规格或多规格）
        }
      })
  }

  const specsClick = (key, id) => {
    specList.value.map(group => {
      if (group.key == key) {
        group.valueList.map((option, index) => {
          if (option.spec_value_id == id) {
            option.show = true
          } else {
            option.show = false
          }
        })
      }
    })

    let arr = []
    specList.value.map(item => {
      let obj = item.valueList.filter(items => items.show === true)
      if (obj.length > 0) {
        arr.push(obj[0])
      }
    })

    if (arr.length == specList.value.length) {
      let idsString = arr.map(item => item.spec_value_id).join('_')

      let idsObj = info.value.skuList.filter(items => items.goods_sku_id === idsString)[0]
      if (idsObj.image_url) {
        chooseInfo.value.goods_image = idsObj.image_url
      }
    }
  }
</script>

<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    .proDet_wrap {
      // 头图
      .top {
        .top-cont {
          .top-tit {
            font-size: 34px !important;
            margin-bottom: 16px !important;
          }

          .top-eng {
            font-size: 14px !important;
          }

          .top-img {
            width: 380px !important;
          }
        }
      }
      .bot {
        padding: 0 76px !important;
        margin-bottom: 25px !important;

        .head-img {
          padding: 35px 0px !important;
          margin-top: 30px;

          .img {
            width: 380px !important;
          }

          .text {
            padding-left: 70px !important;

            .blue {
              font-size: 22px !important;
            }

            .specification {
              margin-top: 25px !important;

              .spe_tit {
                font-size: 13px !important;
                margin-bottom: 10px !important;
              }
              .spe_item {
                min-width: 110px !important;
                font-size: 14px !important;
                height: 35px !important;
                margin-right: 13px !important;

                &:last-child {
                  margin-right: 0 !important;
                }
              }
            }
          }
        }

        .title {
          font-size: 20px !important;
          margin: 20px 0 50px 0 !important;

          img {
            width: 15px !important;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1700px) {
    .proDet_wrap {
      // 头图
      .top {
        .top-cont {
          .top-tit {
            font-size: 32px !important;
            margin-bottom: 14px !important;
          }

          .top-eng {
            font-size: 13px !important;
          }

          .top-img {
            width: 300px !important;
          }
        }
      }

      .bot {
        padding: 0 50px !important;

        .head-img {
          padding: 30px 0px !important;
          margin-top: 25px !important;

          .img {
            width: 300px !important;
          }

          .text {
            padding-left: 50px !important;

            .blue {
              font-size: 21px !important;
            }

            .specification {
              margin-top: 20px !important;

              .spe_tit {
                font-size: 12px !important;
                margin-bottom: 8px !important;
              }
              .spe_item {
                min-width: 100px !important;
                font-size: 13px !important;
                height: 33px !important;
                margin-right: 11px !important;

                &:last-child {
                  margin-right: 0 !important;
                }
              }
            }
          }
        }

        .title {
          font-size: 18px !important;
          margin: 15px 0 40px 0 !important;

          img {
            width: 13px !important;
            margin-right: 8px !important;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1550px) {
    .proDet_wrap {
      // 头图
      .top {
        .top-cont {
          .top-tit {
            font-size: 30px !important;
            margin-bottom: 12px !important;
          }

          .top-eng {
            font-size: 12px !important;
          }

          .top-img {
            width: 270px !important;
          }
        }
      }

      .bot {
        padding: 0 40px !important;

        .head-img {
          padding: 30px 0px !important;
          margin-top: 25px !important;

          .img {
            width: 260px !important;
          }

          .text {
            padding-left: 40px !important;

            .blue {
              font-size: 20px !important;
            }

            .specification {
              margin-top: 15px !important;

              .spe_tit {
                font-size: 11px !important;
                margin-bottom: 5px !important;
              }
              .spe_item {
                min-width: 90px !important;
                font-size: 12px !important;
                height: 30px !important;
                margin-right: 10px !important;

                &:last-child {
                  margin-right: 0 !important;
                }
              }
            }
          }
        }

        .title {
          font-size: 16px !important;
          margin: 10px 0 30px 0 !important;

          img {
            width: 10px !important;
            margin-right: 6px !important;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1400px) {
    .proDet_wrap {
      //  头图
      .top {
        .top-cont {
          .top-tit {
            font-size: 28px !important;
          }
        }
      }
    }
  }

  .proDet_wrap {
    font-family: Microsoft YaHei;
    background: #f5f6fa;

    // 头图
    .top {
      width: 100%;
      aspect-ratio: 16/2.3;
      background: url('../../image/mine/shop-det-bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .top-cont {
        position: relative;
        color: #fff;
        height: 100%;

        .top-tit {
          font-size: 38px;
          margin-bottom: 20px;
        }

        .top-eng {
          font-size: 16px;
        }

        .top-img {
          width: 484px;
          height: auto;
        }
      }
    }

    .bot {
      background: #fff;
      padding: 0 86px;
      border-radius: 21px;
      margin-bottom: 30px;

      .head-img {
        width: 100%;
        padding: 40px 0px;
        box-sizing: border-box;
        margin-top: 30px;

        .img {
          width: 400px;
          aspect-ratio: 3/3;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .img-grey {
          font-size: 14px;
          color: #acacac;
          background: #eee;
        }

        .text {
          width: fit-content;
          padding-left: 80px;

          .blue {
            font-size: 26px;
            color: #333;
          }

          .specification {
            margin-top: 30px;

            .spe_tit {
              font-size: 14px;
              color: #999;
              margin-bottom: 15px;
            }
            .spe_item {
              width: fit-content;
              min-width: 126px;
              font-size: 16px;
              height: 38px;
              color: #666;
              background: #f2f2f2;
              margin-right: 16px;

              &:last-child {
                margin-right: 0;
              }

              &.active {
                color: #5463ff;
                background: rgba(84, 99, 255, 0.1);
              }
            }
          }
        }
      }

      .title {
        width: 100%;
        font-size: 22px;
        color: #333;
        padding-bottom: 10px;
        margin: 60px 0 70px 0;
        border-bottom: 1px solid #d8d8d8;

        img {
          width: 17px;
          height: auto;
          margin-right: 10px;
        }
      }

      .sub {
        font-size: 0px;
        padding-bottom: 20px;
      }
    }
  }
</style>
